<template>
  <div v-show="show" v-cloak>
   <div class="artice">
     <h3>{{detail.ev_title}}</h3>
     <p>
       <span class="fr">上传人:{{detail.us_nickname}}</span>
       <span>{{detail.time}}</span>
     </p>
    <div v-if="detail.ev_service == ''">
      <div class="assessmentlia">
        <ul class="assessmentli">
          <li v-for="(item,index) in  detailnav" :class="{'active' : navindex == index}" @click="navclick(index)"><span>{{item}}</span></li>
        </ul>
      </div>
      <!-- 性能--->
      <a name="name0"></a>
      <div v-html="detail.ev_property" class="artice_con" id="artice_con0"></div>
      <!-- 安全--->
      <a name="name1"></a>
      <div v-html="detail.ev_safety" class="artice_con" id="artice_con1"></div>
      <!-- 油耗--->
      <a name="name2"></a>
      <div v-html="detail.ev_oil" class="artice_con" id="artice_con2"></div>
      <!-- 综合--->
      <a name="name3"></a>
      <div v-html="detail.ev_synthesize" class="artice_con" id="artice_con3"></div>
    </div>
     <!-- 综合--->
     <div v-html="detail.ev_service" class="artice_con" v-else></div>
   </div>
  </div>
</template>
<script>
  let $ = require('jquery')
  import 'iview/dist/styles/iview.css'
  export default {
    name: 'anwerlist',
    components: {
    },
    data () {
      return {
        navindex: 0,
        ar_id: '',
        show: false,
        page: 0,
        limit: 6,
        detail: {},
        questionAjax: true,
        count: 0,
        name: '',
        detailnav: ['性能', '安全', '油耗', '综合'],
        fixednav: false,
        skey: ''
      }
    },
    methods: {
      changeEvid: function () {
        this.ev_id = this.$chaos.getQueryString('ev_id')
        this.cate = decodeURI(this.$chaos.getQueryString('cate'))
        this.getArticledetail()
      },
      navclick: function (index) {
        this.navindex = index
        var height1 = $('#artice_con0').height() + 301
        var height2 = height1 + $('#artice_con1').height()
        var height3 = height2 + $('#artice_con2').height()
        if (index === 0) {
          window.scrollTo(0, 0)
        }
        if (index === 1) {
          window.scrollTo(0, height1)
        }
        if (index === 2) {
          window.scrollTo(0, height2)
        }
        if (index === 3) {
          window.scrollTo(0, height3)
        }
      },
      getArticledetail: function () {
        let thisObj = this
        if (!thisObj.questionAjax) {
          return false
        }
        thisObj.questionAjax = false
        // 获取问答列表
        if (thisObj.ev_id === '') {
          return false
        }
        thisObj.$chaos.ajax({
          data: {
            ev_id: thisObj.ev_id
          },
          slient: true,
          userinfo: false,
          url: 'Evaluation/getEvaluationDetail',
          callback: function (type, res) {
            thisObj.questionAjax = true
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              let crumbs = []
              if (thisObj.cate === '1') {
                crumbs[0] = {
                  title: res.result.list.ev_title,
                  link: ''
                }
              } else {
                if (thisObj.cate === '搜索') {
                  crumbs[0] = {
                    title: thisObj.cate,
                    link: ''
                  }
                  if (thisObj.skey === '') {
                    crumbs[1] = {
                      title: '全部',
                      link: '/FuzzySearch?skey=' + thisObj.skey
                    }
                  } else {
                    crumbs[1] = {
                      title: thisObj.skey,
                      link: '/FuzzySearch?skey=' + thisObj.skey
                    }
                  }
                  crumbs[2] = {
                    title: res.result.list.ev_title,
                    link: ''
                  }
                } else {
                  crumbs[0] = {
                    title: thisObj.cate,
                    link: '/VehicleCenter'
                  }
                  crumbs[1] = {
                    title: res.result.list.ev_title,
                    link: ''
                  }
                }
              }
              thisObj.$store.commit('crumbs', crumbs)
              thisObj.detail = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        thisObj.ev_id = thisObj.$chaos.getQueryString('ev_id')
        thisObj.cate = decodeURI(thisObj.$chaos.getQueryString('cate'))
        thisObj.skey = decodeURI(thisObj.$chaos.getQueryString('skey'))
//        thisObj.$chaos.setTitle(thisObj.cate)
        thisObj.getArticledetail()
      }
    },
    activated: function () {
      this.verify()
    },
    created: function () {
      let thisObj = this
      this.verify()
      window.onscroll = function () {
        var top
        if ($(window).scrollTop()) {
          top = $(window).scrollTop()
        } else if (document.body.scrollTop) {
          top = document.body.scrollTop
        }
        var height1 = $('#artice_con0').height() + 300
        var height2 = height1 + $('#artice_con1').height()
        var height3 = height2 + $('#artice_con2').height()
        if (top <= height1) {
          thisObj.navindex = 0
        } else if (height1 < top && top <= height2) {
          thisObj.navindex = 1
        } else if (height2 < top && top <= height3) {
          thisObj.navindex = 2
        } else if (top > height3) {
          thisObj.navindex = 3
        }
        if (top > 521) {
          $('.assessmentlia').addClass('divClass2')
        } else {
          $('.assessmentlia').removeClass('divClass2')
        }
      }
    },
    watch: {
      '$route': 'changeEvid'
    }
  }
</script>
<style>
  .top_klj>div>span{
    font-size: 16px;
  }
  .assessmentli{
    width:100%;
    height:50px;
    background: #d5f3fe;
    box-shadow: 3px 2px 4px #ccc;
    clear: both;
    overflow: hidden;
    margin: 86px 0px 20px;
    display: flex;
  }
  .assessmentli li.active span,.assessmentli li span:hover{
     background: url("../../../static/image/ts_2.png");
    background-size: cover;
    color: #fff;
    cursor: pointer;
  }
  .assessmentli li span{
    width: 149px;
    height:50px;
    color: #000;
    font-size: 19px;
    line-height: 50px;
    display: inline-block;
    text-align: center;
    font-weight: 600;
  }
  .assessmentli li:nth-child(2),.assessmentli li:nth-child(3){
    text-align: center;
  }
  .assessmentli li:nth-child(4){
    text-align: right;
  }
  .assessmentli li{
    flex: 1;
  }
  .main-title span{
    font-size: 16px!important;
  }
  /*分页样式*/
  .ivu-page-total{
    vertical-align: -2px;
  }
  .ivu-page-item-active{
    background: #2d8cf0!important;
  }
  .ivu-page-item-active a, .ivu-page-item-active:hover a{
    color: #fff!important;
  }
  .ivu-page-item{
    border:1px solid #2d8cf0!important;
  }
  .ivu-page-item-jump-next, .ivu-page-item-jump-prev{
    position: relative!important;
  }
  .ivu-page-item-jump-next:after, .ivu-page-item-jump-prev:after{
    position: absolute;
    top: 0px;
  }
  /*分页样式*/
</style>
<style scoped>
  .divClass2{
    position: fixed;
    width:955px;
    height: 137px;
    top: -60px;
    background: #fff;
  }
  #city {
    position: relative;
  }
  .artice{
    position: relative;
  }
  .assessment_name{
    position: fixed;
    top:0px;
    left:300px;
  }
  .artice h3{
    font-size: 22px;
    text-align: center;
    line-height: 40px;
    margin: 20px 0px 30px;
  }
  .fr{
    float: right;
  }
  .artice>p{
    width:350px;
    font-size: 15px;
    color: #6d6d6d;
    margin-bottom: 15px;
    float: right;
  }
  .artice_con{
    font-size: 16px;
    line-height: 35px;
    color: #000;
  }
</style>
